import React, { Component } from 'react'
import {
  NavBar,
  Icon,
  InputItem,
  WingBlank,
  WhiteSpace,
  Button,
  Toast
} from 'antd-mobile'
import {registe}from '../../../api/registe'
import './index.css'
import msg from './msg.png'
//请输入您的密码
let password
export default class VerifyCode extends Component {
  state = {
    isShow:false,
    isDisabled:true
  }
  eyeHandles = ()=>{
    this.setState({//设置状态
      isShow:!this.state.isShow//显示
    })
  }
  changeHandle = (value)=>{//通过
    if(/^[a-zA-Z]\w{5,17}$/.test(value)){//密码(以字母开头，长度在6~18之间，只能包含字母、数字和下划线)
      this.setState({
        isDisabled:false
      })
      password = value
    }else{//不通过
      this.setState({
        isDisabled:true
      })
    }
  }

  //注册
  registeHandle = async () => {
    const phone = this.props.phone
    const result = await registe(phone,password)
    console.log(result);
    if(result.data.success){
      // 注册成功
      this.props.history.push('/home',result.data.data.user)
    }else{
      // 注册失败
      Toast.fail('注册失败', result.data.message)
    }
  }

  render() {
    const {isShow,isDisabled} = this.state
    return (
      <div className='wrap'>
        <NavBar
          mode='light'
          icon={<Icon type='left' color='#000' />}
          onLeftClick={() => console.log(111)}
        >
          硅谷注册
        </NavBar>
        <WhiteSpace size='lg'></WhiteSpace>

        <WingBlank size='lg'>
          <div className='img'>
            <img src={msg} alt='' />
          </div>
          <WhiteSpace size='lg'></WhiteSpace>
          <WingBlank size='lg'>
            <div className='tip'>请设置登录密码</div>
          </WingBlank>
          <WhiteSpace size='lg'></WhiteSpace>

          <div className='code'>
            <InputItem
              className='psw'
              type={isShow ? 'text' : 'password'}
              clear
              placeholder='请设置8~20位登录密码'
              extra={<span className={isShow ? 'iconfont icon-yanjing' : 'iconfont icon-close-eye'} onClick={this.eyeHandle}></span>}
              onChange={this.changeHandle}
            ></InputItem>
          </div>
          <WingBlank size='lg'>
            <div>
              密码以字母开头，长度在6~18之间，只能包含字母、数字和下划线
            </div>
          </WingBlank>
          <WingBlank size='lg'>
          <Button className='code-next' type='warning' disabled={isDisabled} onClick={this.registeHandle}>
              完成
            </Button>
          </WingBlank>
          <WingBlank size='lg'>
            遇到问题了?
          <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2698547604&site=qq&menu=yes">点击这里联系客服</a>
          </WingBlank>
        </WingBlank>
      </div>
    )
  }
}
